<template>
  <div ref="canvas">
    <nav class="navbar">
      <span @click="go(0)" :class="{ active: activeIndex === 0 }">首页</span>
      <span @click="go(1)" :class="{ active: activeIndex === 1 }"
        >城市介绍</span
      >
      <span @click="go(2)" :class="{ active: activeIndex === 2 }"
        >城市历史</span
      >
      <span @click="go(3)" :class="{ active: activeIndex === 3 }"
        >联系我们</span
      >
    </nav>
    <lFTEecharts :leftShifted="leftShifted"></lFTEecharts>
    <RIGHTecharts :rightShifted="rightShifted"></RIGHTecharts>
    <transition name="tv-animation">
      <div
        class="mengcheng jdv"
        v-show="showContent == true && activeIndex !== 0"
      >
        <span @click="shut" class="close">&times;</span>
        <Cityinfo v-if="activeIndex == 1" />
        <History v-if="activeIndex == 2" />
        <ContactUs v-if="activeIndex == 3" />
      </div>
    </transition>
  </div>
</template>

<script>
import { onUnmounted, inject, provide, ref, defineComponent } from "vue";
import Cityinfo from "../views/cityinfo.vue";
import History from "../views/HistoryCulture.vue";
import ContactUs from "../views/ContactUs.vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import ContactUsVue from "./ContactUs.vue";
import lFTEecharts from "./echars/leftechars.vue";
import RIGHTecharts from "./echars/rightechars.vue";
export default defineComponent({
  components: {
    Cityinfo,
    History,
    ContactUs,
    lFTEecharts,
    RIGHTecharts,
  },
  mounted() {
    this.initScene(this.$refs.canvas);
  },
  setup() {
    // 控制两边数据面板
    const leftShifted = ref(false);
    const rightShifted = ref(false);

    //
    let activeIndex = ref(-1);
    let showContent = ref(false);
    let renderer = ref(null);
    let scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera(
      100,
      window.innerWidth / window.innerHeight,
      10,
      10000
    );

    let controls = ref(null);
    const initScene = (canvas) => {
      renderer.value = new THREE.WebGLRenderer();
      renderer.value.setSize(window.innerWidth, window.innerHeight);
      canvas.appendChild(renderer.value.domElement);

      camera.position.set(0, 90, 700);
      camera.lookAt(scene.position);

      const ambientLight = new THREE.AmbientLight(0xffffff, 1);
      scene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
      directionalLight.position.set(0, 1, 1).normalize();
      scene.add(directionalLight);
      // 添加鼠标交互控制
      controls = new OrbitControls(camera, renderer.value.domElement);
      initModal(scene);
      animate();
    };
    const initModal = (scene) => {
      const loader = new GLTFLoader();
      loader.load("../../map.glb", (gltf) => {
        console.log(gltf.scene.children[0]);
        const mesh = gltf.scene.children[0];
        // if(mesh.name=='ESRI_AERIAL_WM'){
        //   mesh.visible=false
        // }
        scene.add(gltf.scene);
      });
    };
    const animate = () => {
      requestAnimationFrame(animate);
      // controls.value.update();
      renderer.value.render(scene, camera);
    };
    const shut = () => {
      showContent.value = false;
      leftShifted.value = false;
      rightShifted.value = false;
    };
    const go = (index) => {
      activeIndex.value = index;
      showContent.value = true;
      if (index !== 0) {
        leftShifted.value = true;
        rightShifted.value = true;
      } else {
        leftShifted.value = false;
        rightShifted.value = false;
      }
    };
    return {
      activeIndex,
      showContent,
      go,
      shut,
      initScene,
      leftShifted,
      rightShifted,
    };
  },
  beforeUnmount() {
    controls.value.dispose();
    renderer.value.dispose();
  },
});
</script>


<style scoped>
.active {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
  color: rgb(0, 81, 255) !important;
}
.navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translatex(-50%);
  background-color: #0f5be673;
  color: #fff;
  padding: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom-left-radius: 1rem;
  width: 80%;
  /* border-top: 0; */
  border: 3px solid #1e8dea;
  box-shadow: 0px 0px 10px #f5f3f3;
  border-top: 0;
  height: 4rem;
  line-height: 4rem;
  border-bottom-right-radius: 1rem;
}
.navbar span {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
  color: white;
  padding: 0 2rem;
}
#canvas {
  background-color: aliceblue;
}
.x {
  position: relative;
  right: 0;
  float: right;
  margin-right: 5px;
}
.move {
  animation: moveRight 1s ease;
}
.tdisplay {
  display: block;
}
.center-close {
  transition: all 0.5s ease-in-out; /* 添加过渡效果 */
}
@keyframes moveRight {
  0% {
    left: 0;
  }
  100% {
    left: 100px; /* Adjust the distance as needed */
  }
}
/* 其他样式... */
.jdv {
  transition: all 0.5s ease-in-out;
}
.tv-close-enter-active,
.tv-close-leave-active {
  transition: all 0.5s ease-in-out;
}

.tv-close-enter,
.tv-close-leave-to {
  opacity: 0;
  transform: scaleX(0);
}

/* 其他样式... */
/* 电视开机 */
.tv-animation-enter-active,
.tv-animation-leave-active {
  transition: all 0.5s ease-in-out;
}

.tv-animation-enter,
.tv-animation-leave-to {
  transform: scaleX(0); /* 初始状态宽度为0 */
  transform-origin: center;
  opacity: 0; /* 初始状态透明度为0 */
}

.tv-animation-enter-to,
.tv-animation-leave {
  transform: scaleX(1); /* 完全展开 */
  opacity: 1; /* 完全展开时透明度为1 */
}
</style>
